<template>
  <view class="indexView uni-app--showtabbar">
    <!-- 状态栏 -->
    <view class="status-bar-height"></view>

    <!-- 使用 uview-plus 的 tabbar -->
    <view class="indexNavView">
      <up-tabbar
          :value="activeTab"
          @change="changeTab"
          fixed
          :placeholder="false"
      >
        <up-tabbar-item text="首页">
          <template #active-icon>
            <image class="u-page__item__slot-icon tabbar-icon" src="/static/tabbar/i-zhuyexuanzhong.png"></image>
          </template>
          <template #inactive-icon>
            <image class="u-page__item__slot-icon tabbar-icon" src="/static/tabbar/i-shouye.png"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="短视频">
          <template #active-icon>
            <image class="u-page__item__slot-icon tabbar-icon" src="/static/tabbar/i-a-shipinxuanzhong1x.png"></image>
          </template>
          <template #inactive-icon>
            <image class="u-page__item__slot-icon tabbar-icon" src="/static/tabbar/i-shipin.png"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="发布">
          <template #active-icon>
            <image class="u-page__item__slot-icon tabbar-icon" src="/static/tabbar/i-fabu-xuanzhong.png"></image>
          </template>
          <template #inactive-icon>
            <image class="u-page__item__slot-icon tabbar-icon" src="/static/tabbar/i-fabu.png"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="消息" :badge="privateUnreadCount > 0 ? privateUnreadCount : ''">
          <template #active-icon>
            <image class="u-page__item__slot-icon tabbar-icon" src="/static/tabbar/i-yinle-xuanzhong.png"></image>
          </template>
          <template #inactive-icon>
            <image class="u-page__item__slot-icon tabbar-icon" src="/static/tabbar/i-yinle.png"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="我的">
          <template #active-icon>
            <image class="u-page__item__slot-icon tabbar-icon" src="/static/tabbar/i-wode-xuanzhong.png"></image>
          </template>
          <template #inactive-icon>
            <image class="u-page__item__slot-icon tabbar-icon" src="/static/tabbar/i-wode.png"></image>
          </template>
        </up-tabbar-item>
      </up-tabbar>
    </view>

    <!-- 页面内容区域 -->
    <view class="indexContentView">
      <home-page v-if="activeTab === 0"/>
      <video-page v-if="activeTab === 1"/>
      <publish-page v-if="activeTab === 2"/>
      <message-page v-if="activeTab === 3"/>
      <profile-page v-if="activeTab === 4"/>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { usePrivateChatStore } from '@/stores/privateChat'
import HomePage from '@/pages/home/home.vue'
import VideoPage from '@/pages/video/video.vue'
import PublishPage from '@/pages/publish/publish.vue'
import MessagePage from '@/pages/message/message.vue'
import ProfilePage from '@/pages/profile/profile.vue'

// 当前激活的tab索引
const activeTab = ref(0)

// 私聊状态管理
const privateChatStore = usePrivateChatStore()
const privateUnreadCount = ref(0)

// 监听未读消息数更新事件
const handleUnreadCountUpdate = (count) => {
  privateUnreadCount.value = count
}

// 处理tab切换事件
const handleSwitchTab = (index) => {
  activeTab.value = index
}

// 切换tab的方法
const changeTab = (index) => {
  activeTab.value = index
}

// 组件挂载时监听事件
onMounted(() => {
  // 监听未读消息数更新事件
  uni.$on('updateUnreadCount', handleUnreadCountUpdate)
  
  // 监听tab切换事件
  uni.$on('switchTab', handleSwitchTab)
  
  // 初始化未读消息数
  privateUnreadCount.value = privateChatStore.privateUnreadCount
})

// 组件卸载时取消监听事件
onUnmounted(() => {
  uni.$off('updateUnreadCount', handleUnreadCountUpdate)
  uni.$off('switchTab', handleSwitchTab)
})
</script>

<style scoped lang="scss">
@import '@/uni.scss';

.indexView {
  width: 100%;
  height: calc(100vh - $tabbar-height); // - 状态栏高度 - 底部tabbar高度
  overflow: hidden;
}

/* #ifdef MP-WEIXIN*/
.indexView {
  width: 100%;
  height: calc(100vh - $tabbar-height - var(--status-bar-height)); // - 状态栏高度 - 底部tabbar高度 - 微信小程序状态栏高度
  overflow: auto;
}
/* #endif */

.indexNavView {
}

.status-bar-height {
  height: var(--status-bar-height);
}

.indexContentView {
  height: calc(100% - var(--status-bar-height));
}

// 添加tabbar图标样式
.tabbar-icon {
  width: 20px;
  height: 20px;
}
</style>